<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .list {
        display: flex;
        width: 500px;
        height: 30px;
        justify-content: space-between;
        align-items: center;
      }
      input {
        outline: none;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div>
        编号:<input v-focus type="text" v-model="id" :disabled="isedit" /> 名称:
        <input type="text" v-model="name" />
        <button @click="submit" :disabled="isSumbit">提交</button>
      </div>
      <nav>总共{{todo}}本</nav>
      <div v-for="(item,index) in list" class="list">
        <div>{{item.id}}</div>
        <div>{{item.name}}</div>
        <div>
          <a href="#" @click="change(item)">修改</a>
          <a href="#" @click="remove(index)">删除</a>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      // 自定义指令使输入框获得焦点
      Vue.directive("focus", {
        inserted(ele) {
          ele.focus();
        },
      });

      const app = new Vue({
        el: "#app",
        data() {
          return {
            id: "",
            name: "",
            isedit: false,
            list: [
              {
                id: 1,
                name: "三国演义",
              },
              {
                id: 2,
                name: "水浒传",
              },
              {
                id: 3,
                name: "红楼梦",
              },
              {
                id: 4,
                name: "西游记",
              },
            ],
          };
        },
        computed: {
          // 计算总数
          todo() {
            return this.list.length;
          },
          //   检测是否修改了数据
          isSumbit() {
            for (let i = 0; i < this.list.length; i++) {
              if (this.name == this.list[i].name) {
                return true;
              }
            }
            return false;
          },
        },
        methods: {
          submit() {
            // 如果编号被禁用，证明需要把最新的数据更新到页面上
            if (this.isedit) {
              this.list.forEach((element) => {
                if (this.id == element.id) {
                  element.name = this.name;
                }
              });
              (this.id = ""), (this.name = "");
              this.isedit = false;
            } else {
              // 非空检测
              if (this.id && this.name) {
                //检测id是否相同
                this.list.every((item) => {
                  if (item.id == this.id) {
                    alert("id不能相同");
                    return false;
                  } else {
                    this.list.push({
                      id: this.id,
                      name: this.name,
                    });
                  }
                });
              }
              this.id = "";
              this.name = "";
            }
          },
          //   修改
          change(item) {
            (this.id = item.id), (this.name = item.name), (this.isedit = true);
          },
          //   删除
          remove(index) {
            this.list.splice(index, 1);
          },
        },
      });
    </script>
  </body>
</html>
